<template>
  <!-- 手机模型容器 -->
  <div>
    <div class="bg-gray-200 p-25 ">
      <el-page-header @back="router.back">
        <template #content>
          <span class="text-large font-600 mr-3"> 战略微头条 </span>
        </template>
      </el-page-header>
    </div>
    <div>
      <div class="phone-mockup">
        <!-- 手机顶部凹口 -->
        <div class="phone-notch"></div>
        <!-- 手机屏幕内容 -->
        <div class="phone-screen">
          <!-- 状态栏 -->
          <div class="status-bar">
            <div class="time">{{ currentTime }}</div>
            <!-- 状态图标：信号、WiFi、电池 -->
            <div class="status-icons">
              <span>📶</span>
              <span>📡</span>
              <span>🔋</span>
            </div>
          </div>

          <!-- 应用容器 -->
          <div class="app-container">
            <!-- 新闻容器 -->
            <div class="news-container">
              <!-- 新闻头部 -->
              <div class="news-header">
                <h1 class="news-title">{{ newsData.title }}</h1>
                <!-- 新闻元信息：阅读量、发布时间 -->
                <div class="news-meta">
                  <div class="read-count">{{ newsData.readCount }}人阅读</div>
                  <div>发布时间: {{ newsData.publishDate }}</div>
                </div>
              </div>

              <!-- 分隔线 -->
              <div class="divider"></div>

              <!-- 新闻内容 -->
              <div class="news-content">
                <!-- 新闻周报标题 -->
                <h2 class="section-title">新闻周报</h2>

                <!-- 新闻列表项 -->
                <div class="news-item" v-for="(item, index) in newsData.items" :key="index"
                  :class="{ 'read': item.read }">
                  <!-- 新闻标题 -->
                  <h3 class="news-item-title">
                    {{ item.title }}
                    <!-- 已读状态标记 -->
                  </h3>
                  <!-- 新闻来源 -->
                  <div class="news-source">{{ item.source }}</div>
                  <!-- 新闻摘要 -->
                  <p class="news-abstract">{{ item.abstract }}</p>
                  <!-- 阅读全文按钮 -->
                  <span class="read-more" @click="markAsRead(index)">阅读全文</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 手机底部横条 -->
          <div class="home-indicator"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入Vue必要的API
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 响应式数据
const currentTime = ref('9:41') // 当前时间
const newsData = ref({ // 新闻数据对象
  title: '战略微头条 (NO.07) 2024.08.05-08.11', // 新闻标题
  readCount: 0, // 阅读计数
  publishDate: '2024-08-05', // 发布日期
  items: [ // 新闻列表
    {
      title: '第3条测试新闻：城市建设展现新活力 - 详细标题', // 新闻标题
      source: '央视网', // 新闻来源
      abstract: '这是第3条新闻的摘要内容，简要介绍了新闻的主要内容和核心观点。', // 新闻摘要
      read: false // 已读状态
    },
    {
      title: '科技创新引领产业升级新趋势',
      source: '科技日报',
      abstract: '近期多项科技创新成果发布，为产业升级注入新动力。',
      read: false
    },
    {
      title: '绿色能源发展迎来新机遇',
      source: '能源报',
      abstract: '国家发布新能源政策，推动绿色能源产业快速发展。',
      read: false
    },
    {
      title: '数字经济成为经济增长新引擎',
      source: '经济日报',
      abstract: '数字经济持续快速发展，多个领域实现突破性进展。',
      read: false
    }
  ]
})

</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* 手机模型样式 */
.phone-mockup {
  width: 360px;
  height: 740px;
  background: #222;
  border-radius: 40px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* 手机屏幕样式 */
.phone-screen {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 状态栏样式 */
.status-bar {
  height: 44px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #f0f0f0;
}

.time {
  font-weight: 600;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 应用容器样式 */
.app-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 新闻容器样式 */
.news-container {
  background: white;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  flex: 1;
}

/* 新闻头部样式 */
.news-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(to right, #1890ff, #36cfc9);
  color: white;
}

.news-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}

.news-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  opacity: 0.9;
  flex-wrap: wrap;
  gap: 16px;
}

.read-count {
  display: flex;
  align-items: center;
}

.read-count::before {
  content: "👁️";
  margin-right: 4px;
}

/* 分隔线样式 */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 16px 0;
}

/* 新闻周报标题样式 */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  color: #1a1a1a;
  padding: 0 20px;
}

.section-title::before {
  content: "🔥";
  margin-right: 6px;
}

/* 新闻内容样式 */
.news-content {
  padding: 16px 20px;
}

/* 新闻项样式 */
.news-item {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.news-item.read {
  opacity: 0.7;
}

.news-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.news-item-title:hover {
  color: #1890ff;
}

.news-source {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.news-abstract {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.5;
}

.read-more {
  display: inline-block;
  color: #1890ff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px 0;
}

.read-more:hover {
  text-decoration: underline;
}

.read-status {
  font-size: 11px;
  color: #52c41a;
  background: #f6ffed;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #b7eb8f;
  white-space: nowrap;
  margin-left: 8px;
}

/* 滚动条样式 */
.app-container::-webkit-scrollbar {
  width: 4px;
}

.app-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.app-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.app-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 手机顶部凹口 */
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 30px;
  background: #222;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 10;
}

/* 手机底部横条 */
.home-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
}

/* 响应式设计 */
@media (max-width: 400px) {
  .phone-mockup {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0;
  }

  .phone-screen {
    border-radius: 0;
  }
}
</style>